﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonalEdit.aspx.cs" Inherits="AiXiu.WebSite.PersonalEdit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人信息编辑</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Content/mui/css/app.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.picker.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.poppicker.css" rel="stylesheet" />
    <link href="Content/personaleidt.css" rel="stylesheet" />
    <link href="Content/common.css" rel="stylesheet" />
</head>
<body>
    <header class="mui-bar mui-bar-nav">
         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">编辑个人资料</h1>
    </header>
    <div class="mui-content">
        <form id="form" runat="server" class="mui-input-group">
            <div class="mui-input-row">
                <label>昵称</label>
                <asp:TextBox ID="txtNickName" runat="server" class="mui-input-clear mui-input" placeholder="请输入昵称"></asp:TextBox>
            </div>
            <div class="mui-input-row">
                <label>性别</label>
                <asp:DropDownList ID="ddlSex" runat="server" class="mui-btn mui-btn-block">
                    <asp:ListItem Selected="True" Value="0">未知</asp:ListItem>
                    <asp:ListItem Value="1">男</asp:ListItem>
                    <asp:ListItem Value="2">女</asp:ListItem>
                </asp:DropDownList>
            </div>
            <div class="mui-input-row">
                <label>生日</label>
                <asp:TextBox ID="txtBirthday" runat="server" TextMode="Date"></asp:TextBox>
            </div>
            <div class="mui-input-row">
                <label>所在地</label>
                <div id='cityResult' class="ui-alert"></div>

                <asp:HiddenField ID="hidAddress" runat="server" />
            </div>
            <div class="mui-input-block">
                <label style="margin-left:14px;">爱好</label>
                <div>
                    <input type="checkbox" value="篮球" id="Basketball" />
                    <label for="Basketball">篮球</label>
                    <input type="checkbox" value="跑步" id="Running" />
                    <label for="Running">跑步</label>
                    <input type="checkbox" value="看电影" id="Film" />
                    <label for="Film">看电影</label>
                    <input type="checkbox" value="钢琴" id="Piano" />
                    <label for="Piano">钢琴</label>
                    <input type="checkbox" value="网络游戏" id="Game" />
                    <label for="Game">网络游戏</label>
                    <input type="checkbox" value="逛街购物" id="Shopping" />
                    <label for="Shopping">逛街购物</label>
                </div>
                <asp:HiddenField ID="hidHobby" runat="server" />
            </div>
            <div class="mui-content-padded">
                <asp:Button ID="btnSave" runat="server" Text="立即更新" class="mui-btn mui-btn-block" OnClick="btnSave_Click" />
            </div>
        </form>

    </div>

    <script src="scripts/jquery-1.8.3.min.js"></script>
    <script src="Content/mui/js/mui.js"></script>
    <script src="Content/mui/js/mui.picker.js"></script>
    <script src="Content/mui/js/mui.poppicker.js"></script>
    <script src="Content/mui/js/city.data.js"></script>
    <script>
        (function ($, doc) {
            $.init();
            $.ready(function () {

                //级联示例
                var cityPicker = new $.PopPicker({
                    layer: 2
                });
                cityPicker.setData(cityData);       
                var showCityPickerButton = doc.getElementById('cityResult');
                var cityResult = doc.getElementById('cityResult');
                if (doc.getElementById('hidAddress').value != "") {
                    cityResult.innerText = doc.getElementById('hidAddress').value;
                } else {
                    cityResult.innerText = "请选择";
                }
                
                showCityPickerButton.addEventListener('tap', function (event) {
                    //显示用户地址
                    var address = doc.getElementById('hidAddress').value;
                    if (address != "") {
                        var arr = address.split(',');
                        var city = arr[0];//城市
                        var region = arr[1];//区域
                        for (var n = 0; n < cityData.length; n++) {
                            if (cityData[n].text == city) {
                                //设置城市选中
                                cityPicker.pickers[0].setSelectedIndex(n);
                                for (var i = 0; i < cityData[n].children.length; i++) {
                                    if (cityData[n].children[i].text == region) {
                                        //设置区域选中
                                        cityPicker.pickers[1].setSelectedIndex(i);
                                    }
                                }
                            }
                        }
                    }


                    cityPicker.show(function (items) {
                   
                        cityResult.innerText = items[0].text + " " + items[1].text;
                        doc.getElementById('hidAddress').value = items[0].text + "," + items[1].text;

                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);

            });
        })(mui, document);
    </script>
    <script>

        $(function () {

            //显示爱好
            var arr = $("#hidHobby").val().split(",");
            $("input[type=checkbox]").each(function () {
                if ($.inArray($(this).val(), arr)>=0) {
                    $(this).attr("checked", true);
                }
            });


            $("#btnSave").click(function () {
                var hobby = [];
                $("input[type=checkbox]:checked").each(function () {
                    hobby.push($(this).val());
                    $("#hidHobby").val(hobby);
                });
            });

        })
    </script>
</body>
</html>
